<template>
    <div id="topic">
        <van-nav-bar
            :fixed="true"
            title="专题"
            left-text="返回"
            left-arrow
            :placeholder="true"
            @click-left="$router.go(-1)"
        />

        <ul>
            <li v-for="item in list" :key="item.id">
                <img v-lazy="item.scene_pic_url" alt="" />
                <h3>{{ item.title }}</h3>
                <div class="van-ellipsis">{{ item.subtitle }}</div>
                <p>{{ item.price_info | RMBformat }}起</p>
            </li>
        </ul>

        <van-pagination
            v-model="currentPage"
            :pageCount="totalPages"
            @change="handleClick"
        />
        <Totop :iftop="iftop" @handleScroll="handleScroll" />
    </div>
</template>

<script>
import { GetTopiclList } from "../request/api";
import Totop from "../components/backTop";
export default {
    data() {
        return {
            page: 1, //请求当前页数
            size: 10, //请求每页显示个数
            list: [], //获取的数据
            currentPage: 1, //当前页
            totalPages: "", //总页数
            iftop: false,
        };
    },
    components: {
        Totop,
    },
    methods: {
        //封装的请求函数
        GetTopiclList(page = this.page) {
            GetTopiclList({ page, size: this.size }).then((res) => {
                console.log(res);
                let { data, currentPage, totalPages } = res.data.data;
                this.list = data;
                this.currentPage = currentPage;
                this.totalPages = totalPages;
            });
        },
        handleClick() {
            //分页只需要传入当前页，change事件相对于整个分页按钮
            this.GetTopiclList(this.currentPage);
            document.documentElement.scrollTop = 0;
        },
        handleScroll(iftop) {
            this.iftop = iftop;
        },
    },
    created() {
        this.GetTopiclList();
    },
};
</script>
 
<style lang = "less" scoped>
#topic {
    padding-bottom: 50px;
}
ul {
    li {
        text-align: center;
        background: #fff;
        margin-bottom: 20px;
        margin: 0 auto;
        line-height: 40px;
        img {
            width: 100%;
        }
        div {
            width: 90%;
            margin: 0 auto;
        }
        p {
            color: darkred;
        }
    }
}
.van-pagination {
    background: #fff;
    margin: 20px 0;
}
</style>